<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            * {
                  margin: 0;
                  padding: 0;
            }

            .img {}

            .img::after {
                  content: '';
                  background: url(http://www.handu.com/uploadfile/2021/0223/20210223063334539.jpg) no-repeat;
                  opacity: 0.7;
                  top: 0;
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  z-index: -1;
            }

            .container {
                  width: 298px;
                  height: 400px;
                  /* background-color: lavender; */
                  margin: 80px auto;
            }

            .form-signin-heading {
                  color: rgb(117, 141, 165);
                  text-align: center;
            }

            .form-group {
                  margin-top: 20px;
            }

            .register_btn-primary {
                  display: block;
                  width: 298px;
                  height: 30px;
                  background-color: lightgrey;
                  border-radius: 10px;
                  border: none;
                  margin: 30px auto;
                  color: rgb(74, 151, 228);
            }
      </style>
</head>

<body>
      <div class="img">
            <div class="container">
                  <form action="javascript:void(0)" class="form-horizontal">
                        <h2 class="form-signin-heading">请注册</h2>
                        <div class="form-group">
                              <label for="username" class="control-label">用户名:&emsp;&emsp;&emsp;&emsp;</label>
                              <input type="text" class="form-control" id="username" value="wuyanzu2">
                        </div>
                        <div class="form-group">

                              <label for="password" class="contral-label">密码:&emsp;&emsp;&emsp;&emsp;&emsp;</label>
                              <input type="text" class="form-control" id="password" value="123456">
                        </div>
                        <div class="form-group">

                              <label for="rpassword" class="contral-label">请重新输入密码:</label>
                              <input type="text" class="form-control" id="rpassword" value="123456">
                        </div>
                        <div class="form-group">

                              <label for="nickname" class="contral-label">用户昵称:&emsp;&emsp;&emsp;</label>
                              <input type="text" class="form-control" id="nickname" value="xiaozuzu">
                        </div>

                        <button id="btn" class="register_btn-primary">注册</button>
                  </form>
            </div> <!-- /container -->
      </div>
      <script src="../../static/libs/jQuery.js"></script>
      <script src="../../static/libs/cookie.js"></script>
      <script>
            var btn = document.getElementById("btn");
            var username = document.getElementById("username");
            var password = document.getElementById("password");
            var rpassword = document.getElementById("rpassword");
            var nickname = document.getElementById("nickname");

            btn.onclick = function () {
                  let options={
                        url:"http://127.0.0.1:8888/users/register",
                        type:"POST",
                        headers:{
                              "Content-Type": "application/x-www-form-urlencoded"
                        },
                        data:{
                              username:username.value,
                              password:password.value,
                              rpassword:rpassword.value,
                              nickname:nickname.value
                        },
                        dataType:"json"
                  }
                  $.ajax(options)
                  .done(function(data){
                        console.log(data);
                        switch(data.code){
                        case 1:
                              setTimeout(function(){
                                    location.href="./login.html"
                              },2000)
                        case 0:
                              alert(data.message)
                  }
                  })
                  
            }


      </script>

</body>

</html>